
@prefixcls : radio;

// 外层包裹
.@{prefixcls}-wrapper {
    margin-right: 10px;

    // 主体
    .@{prefixcls} {
        vertical-align: middle;
      .@{prefixcls}-inner {
        line-height: 16px;
        display: inline-block;
        margin-left: 0px;
        margin-right: 7px;
        color: #777;
      }
      .@{prefixcls}-input {
        width: 16px;
        height: 16px;
        appearance: none;
        position: relative;
      }
      .@{prefixcls}-input:before {
        content: '';
        width: 16px;
        height: 16px;
        border: 1px solid #dddddd;
        display: inline-block;
        border-radius: 4px;
        vertical-align: middle;
        margin-top: -1px;
      }
      .@{prefixcls}-input:checked:before {
        content: '';
        width: 16px;
        height: 16px;
        border: 1px solid #000;
        background: #000;
        display: inline-block;
        border-radius: 4px;
        vertical-align: middle;
        margin-top: -1px;
      }
      .@{prefixcls}-input:checked:after {
        content: '';
        width: 8px;
        height: 4px;
        border: 2px solid white;
        border-top: transparent;
        border-right: transparent;
        text-align: center;
        display: block;
        position: absolute;
        top: 4px;
        left: 4px;
        vertical-align: middle;
        transform: rotate(-45deg);
      }
    }
    .@{prefixcls}-label{
        vertical-align: middle;
    }

    // disable 状态
    &.@{prefixcls}-disabled {
        cursor: not-allowed;
        .@{prefixcls}-input {
          cursor: not-allowed;
        }
        .@{prefixcls}-input:before {
          background-color: #ddd;
        }
        .@{prefixcls}-input:checked:before {
          border: 1px solid #ddd;
          background-color: #ddd; 
        }
        .@{prefixcls}-label{
          color: #ddd
        }
      }
  }
  